<?php include 'header.php'; ?>
<script>
    $(document).ready(function() {

        //if submit button is clicked
        $('#submit').click(function() {

            //Get the data from all the fields
            var Title = $('input[name=Title]');
            var FirstName = $('input[name=FirstName]');
            var LastName = $('input[name=LastName]');
            var DOB = $('input[name=DOB]');
            var StreetAddress = $('input[name=StreetAddress]');
            var City = $('input[name=City]');
            var StateOrProvince = $('input[name=StateOrProvince]');
            var ZIP = $('input[name=ZIP]');
            var HomePhone = $('input[name=HomePhone]');
            var MobilePhone = $('input[name=MobilePhone]');
            var EmailAddress = $('input[name=EmailAddress]');
            var Password = $('input[name=Password]');
            var PasswordConfirm = $('input[name=PasswordConfirm]');

            var data = 'Title=' + Title.val() + '&FirstName=' + FirstName.val() + '&LastName=' + LastName.val() + '&DOB=' + DOB.val() + '&StreetAddress=' + StreetAddress.val() + '&City=' + City.val()
                    + '&StateOrProvince=' + StateOrProvince.val() + '&ZIP=' + ZIP.val() + '&HomePhone=' + HomePhone.val() + '&MobilePhone=' + MobilePhone.val() + '&EmailAddress=' + EmailAddress.val() + '&Password=' + Password.val() + '&PasswordConfirm=' + PasswordConfirm.val();

            $('.text').attr('disabled', 'true');

            //start the ajax
            $.ajax({
                url: "db/ProcessGuestRegistration.php",
                type: "POST",
                dataType: "xml",
                //pass the data			
                data: data,
                //Do not cache the page
                cache: false,
                //success
                success: function(xml) {
                    
                    if (data = $('result', xml).text().replace(/(\r\n|\n|\r)/g, "<br />")) {
                        $("#regform").html("<div class='well'>You have been registered successfully</div>");
                        
                    }
                    else {
                        
                        $(xml).find('error').each(function() {
                            data += $(this).text()+'<br>';
                           
                        });
                       
                        $("#modal-body").html(data);
                        $("#errormodal").modal('show')
                    }
                }
            });

            //cancel the submit button default behaviours
            return false;
        });
    });
</script>


<div id="regform">
    <h1>Guest Registration</h1>
    <div id="regform">

        <form class="form-horizontal" method="post" id="register_form">

            <div class="control-group">
                <label class="control-label" for="Title">Title</label>
                <div class="controls">
                    <input class="span1" name="Title" type="text"> 
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="FirstName">First Name</label>
                <div class="controls">
                    <input class="span3" name="FirstName" type="text">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="LastName">Last Name</label>
                <div class="controls">
                    <input class="span3" name="LastName" type="text">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="DOB">Date of Birth</label>
                <div class="controls">
                    <input class="span3" name="DOB" type="text">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="HomePhone"> Home Phone</label>
                <div class="controls">
                    <input type = "text" name="HomePhone" 
                           pattern = "\(\d{3}\) +\d{3}-\d{4}" >
                    (###) ###-####
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="MobilePhone"> Mobile Phone</label>
                <div class="controls">
                    <input type = "text" name="MobilePhone" 
                           pattern = "\(\d{3}\) +\d{3}-\d{4}" > 
                    (###) ###-####
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="StreetAddress">Address</label>
                <div class="controls">
                    <input class="span4" name="StreetAddress" type="text">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="City">City</label>
                <div class="controls">
                    <input class="span3" name="City" type="text">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="StateOrProvince">State or Province</label>
                <div class="controls">
                    <input class="span3" name="StateOrProvince" type="text">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="ZIP">Zip Code</label>
                <div class="controls">
                    <input class="span3" name="ZIP" type="text">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="EmailAddress">Email</label>
                <div class="controls">
                    <input class="span3" name="EmailAddress" type="email">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="Password">Password</label>
                <div class="controls">
                    <input class="span3" name="Password" type="password">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="PasswordConfirm">Confirm Password</label>
                <div class="controls">
                    <input class="span3" name="PasswordConfirm" type="password">
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <button type="submit" id="submit" class="btn">Send Information</button>

                </div>
            </div>
        </form>

    </div>
</div>




<div id="errormodal" class="modal hide fade" style="display: none; z-index: 20000000000;">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Registration Error</h3>
    </div>
    <div class="modal-body" id="modal-body">

    </div>
</div>

<?php include 'footer.php'; ?>